<template>
	<view class="avatar1">
		<view style="width: 100%; height: 100%; background-color: #ffffff;" v-if="items.length==1">
			<image style="width: 100%; height: 100%;" mode="aspectFill" :src="item"
				v-for="(item, index) in items.slice(0, 1)" />
		</view>
		<view style="display: flex; align-items: center;justify-content: center;" v-else-if="items.length==2">
			<view style="display: flex; " v-for="(item, index) in items">
				<image class="avatar-img" mode="aspectFill" :src="item" />
			</view>
		</view>
		<view style="" v-else-if="items.length==3">
			<view style="display: flex;  justify-content: center;align-items: center;"
				v-for="(item, index) in items.slice(0, 1)">
				<image class="avatar-img" mode="aspectFill" :src="item" />
			</view>
			<view style="display: flex; align-items: center;justify-content: center;">
				<view style="display: flex; " v-for="(item, index) in items.slice(-2)">
					<image class="avatar-img" mode="aspectFill" :src="item" />
				</view>
			</view>

		</view>
		<view style="" v-else-if="items.length==4">
			<view style="display: flex;  justify-content: center;align-items: center;">
				<view style="display: flex; " v-for="(item, index) in items.slice(0, 2)">
					<image class="avatar-img" mode="aspectFill" :src="item" />
				</view>
			</view>
			<view style="display: flex; align-items: center;justify-content: center;">
				<view style="display: flex; " v-for="(item, index) in items.slice(-2)">
					<image class="avatar-img" mode="aspectFill" :src="item" />
				</view>
			</view>

		</view>
		<view style="" v-else-if="items.length==5">
			<view style="display: flex;  justify-content: center;align-items: center;">
				<image class="avatar-img" mode="aspectFill" v-for="(item, index) in items.slice(0, 3)" :src="item" />
			</view>
			<view style="display: flex; align-items: center;justify-content: center;">

				<image class="avatar-img" mode="aspectFill" v-for="(item, index) in items.slice(-2)" :src="item" />

			</view>

		</view>
	</view>
</template>

<script>
	export default {
		name: 'planAvatar',
		props: {
			areas: {
				type: String,
				required: false,
				default: "",
			}
		},
		data() {
			return {
				items: this.areasArr()
			};
		},

		methods: {
			areasArr() {
				let areasArray = this.areas.split(",");
				// 使用 map() 方法遍历数组并替换元素
				let replacedArray = areasArray.map(item => {
					if (item === "健康") {
						return "../../static/images/course/h.png";
					} else if (item === "语言") {
						return "../../static/images/course/l.png";
					} else if (item === "科学") {
						return "../../static/images/course/st.png";
					} else if (item === "社会") {
						return "../../static/images/course/s.png";
					} else if (item === "艺术") {
						return "../../static/images/course/a.png";
					}
				});

				return replacedArray;
			}

		},
	}
</script>

<style lang="scss" scoped>
	.avatar1 {
		width: 100%;
		height: 100%;

		display: flex;
		align-items: center;
		justify-content: center;

		.container {
			display: flex;
			background-color: orangered;
		}

	}

	.avatar-img {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
	}
</style>